<template>
    <div class="multi-time-slider">
        <div class="time-list-box">
            <span v-for="(item, index) in 4" :key="index" :style="{ order: 4 - index }">
                {{ dayjs(dateTime).subtract(index, 'hour').format('DDHH') }}
            </span>
        </div>
        <div class="slider-box">
            <div class="time-bar">
                <div class="time-item" v-for="(color, index) in 16" :key="index">
                    <span class="time-inner" :class="{ 'time-item-active': choseTime.isSame(getTimeItem(index)) }">
                        {{ getTimeItem(index).format('HH') }}
                    </span>
                </div>
            </div>
            <div class="slider-inner-bar multi-slider-style">
                <div v-for="(item, index) in 4" :key="index" @click="changeActive(index)">
                    <el-slider :ref="`slider${index}`"
                        :class="{ [`slider-bar-${index + 1}`]: true, disabled: sliderActive != index }"
                        :tooltip-class="sliderActive != index ? 'disabled-tooltip' : ''" :max="timeLength"
                        v-model="slider[index]" :format-tooltip="formatTooltip" placement="bottom"
                        @input="sliderInput(index)" />
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import dayjs from 'dayjs'

export default {
    name: "MultiTimeSlider",
    props: {
        dateTime: {
            required: true,
            type: [String, Date],
            default: undefined
        },
        timeStep: {
            type: Number,
            default: 10,
            // validator(value) {
            //     return value >= 0 && value <= 60
            // }
        },
        defaultSliderActive: {
            type: Number,
            default: 3
        }
    },
    watch: {
        dateTime() { this.resetBar() },
        sliderActive: 'pause'
    },
    data() {
        return {
            dayjs,
            sliderActive: this.defaultSliderActive,
            slider: [0, 0, 0, 0],
        }
    },
    computed: {
        timeLength() {
            // 公式为12个小时乘以60分钟，除以6分钟，加上最终的一个时间，得到时间的间隔个数
            return (12 * 60 / this.timeStep)
        },
        toolTipList() {
            return [...new Array(4)].map((item, index) => {
                return this.$refs[`slider${index}`][0].$refs.button1.$refs.tooltip
            })
        },
        choseTime() {
            return dayjs(this.dateTime).subtract(3 - this.sliderActive, 'hour').add(this.slider[this.sliderActive] * this.timeStep, 'minute')
        }
    },
    mounted() {
        this.setTooltipPosition()
    },
    methods: {
        getTimeItem(index) {
            return dayjs(this.dateTime).subtract(3, 'hour').add(index, 'hour')
        },
        sliderInput(index) {
            if (index != this.sliderActive) return
            const reportTime = dayjs(this.dateTime).subtract(3 - this.sliderActive, 'hour')
            this.$emit('input', this.sliderActive, this.slider[this.sliderActive], reportTime.format('YYYY-MM-DD HH:mm:ss'), this.choseTime.format('YYYY-MM-DD HH:mm:ss'))
        },
        formatTooltip() {
            return this.choseTime.format('MM/DD HH:mm')
        },
        setTooltipPosition() {
            this.toolTipList.forEach((toolTip, index) => {
                toolTip.currentPlacement = index >= 2 ? "top" : "bottom"
                toolTip.showPopper = true
                Object.defineProperty(toolTip, 'showPopper', {
                    get() { return true }
                })
            })
        },
        resetBar(sliderActive = 3) {
            this.slider = [0, 0, 0, 0]
            this.changeActive(sliderActive)
        },
        changeActive(index) {
            this.sliderActive = index
            this.sliderInput(index)
            this.updatePopper()
        },
        updatePopper() {
            this.$nextTick(() => {
                this.toolTipList[this.sliderActive].updatePopper()
            })
        },
        play() {
            this.$emit('update:isPlay', true)
            this.playInterval = setInterval(() => {
                let index = this.slider[this.sliderActive] + 1
                if (index > this.timeLength) {
                    this.resetBar(this.sliderActive)
                    this.pause()
                    return
                }
                this.$set(this.slider, this.sliderActive, index)
                this.updatePopper()
            }, 1000)
        },
        refresh() {
            this.resetBar(3)
            this.pause()
        },
        pause() {
            if (this.playInterval) {
                this.$emit('update:isPlay', false)
                clearInterval(this.playInterval)
            }
        },
    }
};
</script>
  
<style scoped lang="scss" >
.multi-time-slider {
    width: 100%;
    display: flex;

    .time-list-box {
        display: flex;
        flex-direction: column;
        color: #FFF;
        justify-content: flex-end;
        font-size: 14px;
        padding: 0 10px;

        span {
            line-height: 18px;
        }
    }

    .slider-box {
        padding: 0px 25px 0px 10px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;

        .time-bar {
            width: 100%;
            height: 30px;
            overflow: hidden;

            .time-item:last-child {
                width: 0px;
            }

            .time-item {
                float: left;
                height: 30px;
                box-sizing: border-box;
                width: 6.662%;

                // flex-grow: 1;
                .time-inner {
                    display: inline-block;
                    vertical-align: middle;
                    transform: translateX(-50%);
                    transform: translate(-50%);
                    position: absolute;
                    background-color: #0C5D96;
                    color: #FFF;
                    height: 25px;
                    width: 50px;
                    line-height: 25px;
                    text-align: center;
                    border-radius: 7px;
                    font-size: 14px;

                    &.time-item-active {
                        background: linear-gradient(90deg, #0DA5D1 0%, #2ADAE2 100%);
                    }
                }
            }
        }
    }
}
</style>

//这里代码不是局部的，可能会造成全局污染，注意
<style lang="scss">
.disabled-tooltip {
    display: none;
    transition: 0s;
}

.multi-slider-style {
    --slider-height: 10px;

    .el-slider__bar {
        background: linear-gradient(90deg, #2165A7 0%, #4CA6C2 100%);
        height: var(--slider-height);
    }

    .el-slider.disabled {
        .el-slider__runway {
            background-color: #575757;
        }

        .el-slider__button-wrapper,
        .el-slider__bar {
            display: none;
        }
    }

    .el-slider__button-wrapper {
        top: -13px;
    }

    .el-slider__button {
        width: 13px;
        height: 13px;
        border: 3px solid RGB(157, 158, 164);
    }

    .el-slider__runway {
        width: 80%;
        margin: 9px 0px 0px 0px;
        border-radius: 15px;
        background-color: #9b9b9b;
        height: var(--slider-height);
    }

    & .slider-bar-1 {
        margin-top: 7px;

        .el-slider__button-wrapper::before {
            position: absolute;
            content: '';
            width: 0px;
            height: 77px;
            bottom: -43px;
            left: 50%;
            border-left: 1px solid red;
            z-index: 99999;
        }
    }

    & .slider-bar-2 .el-slider__runway {
        margin-left: 6.66666667%;

        .el-slider__button-wrapper::before {
            position: absolute;
            content: '';
            width: 0px;
            height: 77px;
            bottom: -23px;
            left: 50%;
            border-left: 1px solid red;
            z-index: 99999;
        }
    }

    & .slider-bar-3 .el-slider__runway {
        margin-left: 13.3333333333%;

        .el-slider__button-wrapper::before {
            position: absolute;
            content: '';
            width: 0px;
            height: 77px;
            bottom: -5px;
            left: 50%;
            border-left: 1px solid red;
            z-index: 99999;
        }
    }

    & .slider-bar-4 .el-slider__runway {
        margin-left: 20%;

        .el-slider__button-wrapper::before {
            position: absolute;
            content: '';
            width: 0px;
            height: 77px;
            bottom: 14px;
            left: 50%;
            border-left: 1px solid red;
            z-index: 99999;
        }
    }
}
</style>